@extends('layouts.admin.admin_master')

@section('head')
	<link rel="stylesheet" href="{{ asset('admin/css/cropper/cropper.css') }}">
	<link rel="stylesheet" href="{{ asset('admin/css/cropper/main.css') }}">
	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
@endsection

@section('content')
	<!--[if lt IE 8]>
	    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
	<![endif]-->

	<section class="content-header">
    <h1>
      	店铺基本设置
      	<small>头像设置</small>
    </h1>
	    <ol class="breadcrumb">
	     	<li><a href="#"><i class="fa fa-dashboard"></i> 基本资料</a></li>
	     	<li class="active">头像上传</li>
	    </ol>
  	</section>
  	<!-- Content -->
	  <div class="container">
	    <div class="row">
	      <div class="col-md-9">
	        <!-- <h3 class="page-header">Demo:</h3> -->
	        <div class="img-container">
	          <img id="image" src="{{ asset('attachs/default/picture.jpg') }}" alt="Picture">
	        </div>
	      </div>
	      <div class="col-md-3">
	        <!-- <h3 class="page-header">Preview:</h3> -->
	        <div class="docs-preview clearfix">
	          <div class="img-preview preview-lg"></div>
	          <div class="img-preview preview-md"></div>
	          <div class="img-preview preview-sm"></div>
	          <div class="img-preview preview-xs"></div>
	        </div>

	        
	        
	      </div>
	      <div class="col-md-3 docs-toggles">
	        <!-- <h3 class="page-header">Toggles:</h3> -->
	        <div class="btn-group btn-group-justified" data-toggle="buttons">
	          <label class="btn btn-primary active">
	            <input type="radio" class="sr-only" id="aspectRatio0" name="aspectRatio" value="1.7777777777777777">
	            <span class="docs-tooltip" data-toggle="tooltip" title="">
	              16:9
	            </span>
	          </label>
	          <label class="btn btn-primary">
	            <input type="radio" class="sr-only" id="aspectRatio1" name="aspectRatio" value="1.3333333333333333">
	            <span class="docs-tooltip" data-toggle="tooltip" title="">
	              4:3
	            </span>
	          </label>
	          <label class="btn btn-primary">
	            <input type="radio" class="sr-only" id="aspectRatio2" name="aspectRatio" value="1">
	            <span class="docs-tooltip" data-toggle="tooltip" title="">
	              1:1
	            </span>
	          </label>
	          <label class="btn btn-primary">
	            <input type="radio" class="sr-only" id="aspectRatio3" name="aspectRatio" value="0.6666666666666666">
	            <span class="docs-tooltip" data-toggle="tooltip" title="">
	              2:3
	            </span>
	          </label>
	          <label class="btn btn-primary">
	            <input type="radio" class="sr-only" id="aspectRatio4" name="aspectRatio" value="NaN">
	            <span class="docs-tooltip" data-toggle="tooltip" title="">
	              Free
	            </span>
	          </label>
	        </div>
	      </div><!-- /.docs-toggles -->
	    </div>
	    <div class="row">
	      <div class="col-md-9 docs-buttons">
	        <div class="btn-group">
	          <button type="button" class="btn btn-primary" data-method="setDragMode" data-option="move" title="Move">
	            <span class="docs-tooltip" data-toggle="tooltip" title="拖动">
	              <span class="fa fa-arrows"></span>
	            </span>
	          </button>
	          <button type="button" class="btn btn-primary" data-method="setDragMode" data-option="crop" title="Crop">
	            <span class="docs-tooltip" data-toggle="tooltip" title="裁剪">
	              <span class="fa fa-crop"></span>
	            </span>
	          </button>
	        </div>

	        <div class="btn-group">
	          <button type="button" class="btn btn-primary" data-method="zoom" data-option="0.1" title="Zoom In">
	            <span class="docs-tooltip" data-toggle="tooltip" title="放大">
	              <span class="fa fa-search-plus"></span>
	            </span>
	          </button>
	          <button type="button" class="btn btn-primary" data-method="zoom" data-option="-0.1" title="Zoom Out">
	            <span class="docs-tooltip" data-toggle="tooltip" title="缩小">
	              <span class="fa fa-search-minus"></span>
	            </span>
	          </button>
	        </div>

	        <div class="btn-group">
	          <button type="button" class="btn btn-primary" data-method="move" data-option="-10" data-second-option="0" title="Move Left">
	            <span class="docs-tooltip" data-toggle="tooltip" title="左移">
	              <span class="fa fa-arrow-left"></span>
	            </span>
	          </button>
	          <button type="button" class="btn btn-primary" data-method="move" data-option="10" data-second-option="0" title="Move Right">
	            <span class="docs-tooltip" data-toggle="tooltip" title="右移">
	              <span class="fa fa-arrow-right"></span>
	            </span>
	          </button>
	          <button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="-10" title="Move Up">
	            <span class="docs-tooltip" data-toggle="tooltip" title="上移">
	              <span class="fa fa-arrow-up"></span>
	            </span>
	          </button>
	          <button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="10" title="Move Down">
	            <span class="docs-tooltip" data-toggle="tooltip" title="下移">
	              <span class="fa fa-arrow-down"></span>
	            </span>
	          </button>
	        </div>

	        <div class="btn-group">
	          <button type="button" class="btn btn-primary" data-method="rotate" data-option="-45" title="Rotate Left">
	            <span class="docs-tooltip" data-toggle="tooltip" title="左旋">
	              <span class="fa fa-rotate-left"></span>
	            </span>
	          </button>
	          <button type="button" class="btn btn-primary" data-method="rotate" data-option="45" title="Rotate Right">
	            <span class="docs-tooltip" data-toggle="tooltip" title="右旋">
	              <span class="fa fa-rotate-right"></span>
	            </span>
	          </button>
	        </div>

	        <div class="btn-group">
              <button type="button" class="btn btn-primary" data-method="scaleX" data-option="-1" title="Flip Horizontal">
	            <span class="docs-tooltip" data-toggle="tooltip" title="左右镜像">
	              <span class="fa fa-arrows-h"></span>
	            </span>
	          </button>
	          <button type="button" class="btn btn-primary" data-method="scaleY" data-option="-1" title="Flip Vertical">
	            <span class="docs-tooltip" data-toggle="tooltip" title="上下镜像">
	              <span class="fa fa-arrows-v"></span>
	            </span>
	          </button>
	        </div>

	        <div class="btn-group">
	          <button type="button" class="btn btn-primary" data-method="crop" title="Crop">
	            <span class="docs-tooltip" data-toggle="tooltip" title="显示">
	              <span class="fa fa-check"></span>
	            </span>
	          </button>
	          <button type="button" class="btn btn-primary" data-method="clear" title="Clear">
	            <span class="docs-tooltip" data-toggle="tooltip" title="隐藏">
	              <span class="fa fa-remove"></span>
	            </span>
	          </button>
	        </div>

	        <div class="btn-group">
	          <button type="button" class="btn btn-primary" data-method="reset" title="Reset">
	            <span class="docs-tooltip" data-toggle="tooltip" title="刷新">
	              <span class="fa fa-refresh"></span>
	            </span>
	          </button>
	          <label class="btn btn-primary btn-upload" for="inputImage" title="Upload image file">
	            <input type="file" class="sr-only" id="inputImage" name="file" accept="image/*">
	            <span class="docs-tooltip" data-toggle="tooltip" title="本地图片">
	              <span class="fa fa-upload"></span>
	            </span>
	          </label>
	        </div>

	        <div class="btn-group btn-group-crop">
	          <button type="button" class="btn btn-primary" data-method="getCroppedCanvas">
	            <span class="docs-tooltip" data-toggle="tooltip" title="下载">
	              下载图片
	            </span>
	          </button>
	        </div>

<!-- 	    <button type="button" class="btn btn-primary" data-method="getData" data-option data-target="#putData">
          <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;getData&quot;)">
            Get Data
          </span>
        </button>
 -->
	        <div class="btn-group btn-group-crop">
	          <button type="button" id="img-up" data-method="getData" class="btn btn-primary" data-option data-target="#putData">
	            <span class="docs-tooltip" data-toggle="tooltip" title="保存头像">
	              保存头像
	            </span>
	          </button>
	        </div>

	        <!-- Show the cropped image in modal -->
	        <div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1">
	          <div class="modal-dialog">
	            <div class="modal-content">
	              <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title" id="getCroppedCanvasTitle">裁剪结果</h4>
	              </div>
	              <div class="modal-body"></div>
	              <div class="modal-footer">
	                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	                <a class="btn btn-primary" id="download" href="javascript:void(0);" download="cropped.jpg">下载</a>
	              </div>
	            </div>
	          </div>
	        </div><!-- /.modal -->

	      </div><!-- /.docs-buttons -->

	      
	    </div>
	  </div>
	<!-- content end -->

@endsection

@section('required_script')
  <script src="{{ asset('admin/js/ajaxfileupload.js') }}"></script>
  <script src="{{ asset('admin/js/cropper/cropper.js') }}"></script>
  <script src="{{ asset('admin/js/cropper/main.js') }}"></script>
  <script type="text/javascript">
        $(function () {
            $("#img-up").click(function () {
                ajaxFileUpload();
            })
        })
        function ajaxFileUpload() {
            $.ajaxFileUpload
            (
                {
                    url: '/admin/photo/crop', //用于文件上传的服务器端请求地址
                    secureuri: false, //是否需要安全协议，一般设置为false
                    fileElementId: 'inputImage', //文件上传域的ID
                    dataType: 'json', //返回值类型 一般设置为json
                    data:{
                    	'x': 1
                    },
                    success: function (data, status)  //服务器成功响应处理函数
                    {
                        $("#inputImage").attr("src", data.imgurl);
                        if (typeof (data.error) != 'undefined') {
                            if (data.error != '') {
                                alert(data.error);
                            } else {
                                alert(data.msg);
                            }
                        }
                    },
                    error: function (data, status, e)//服务器响应失败处理函数
                    {
                        alert(1);
                    }
                }
            )
            return false;
        }
    </script>
@endsection